<template>
  <div style="width: 100%">
    <div class="byted-weektime" @mousedown="dian" @mousemove="yi" @mouseup="li">
      <div class="input_btn1">
        <div class="input_btn" style="margin-right: 10px">
          <el-button class="addDwzBtn" type="primary" :icon="Delete" @click="clear">
            删除计划
          </el-button>
        </div>
        <div class="input_btn">
          <el-button class="addDwzBtn" type="primary" :icon="Delete" @click="allClear">
            清空计划
          </el-button>
        </div>
      </div>
      <div class="calendar">
        <ul class="calendar-list">
          <li class="calendar-head">
            <ul>
              <li style="width: 6%"></li>
              <li v-for="i in 24" :key="i" style="width: calc(100% / 24)">
                {{ i - 1 < 10 ? '0' + (i - 1) : i - 1 }} </li>
              <li style="width: 3%"></li>
            </ul>
          </li>
          <li id="tableBody">
            <div id="kuang" :style="{
              width: kuangObj.width + 'px',
              height: kuangObj.height + 'px',
              top: kuangObj.top + 'px',
              left: kuangObj.left + 'px',
              bottom: kuangObj.bottom + 'px',
              right: kuangObj.right + 'px',
            }"></div>
            <ul class="icon-list">
              <li>
                <el-checkbox value="Monday" name="type" v-model="isChecked[0]" @change="handleCheckboxChange(0)">
                  星期一
                </el-checkbox>
              <li @mousedown.prevent="handleMouseDown(i, 0)" @mouseup.prevent="handleMouseUp(i)"
                class="calendar-atom-time" :class="item.class" v-for="(item, i) in rowUnit[0]" :key="i"></li>
              <li style="width: 3%">
                <div class="copyS" @click="clickCopy(0)">
                  <img src="/src/assets/images/timeMouse/copy.png" alt="" />
                </div>
              </li>
          </li>
          <li>
            <el-checkbox value="Tuesday" name="type" v-model="isChecked[1]" @change="handleCheckboxChange(1)">
              星期二
            </el-checkbox>
          <li @mousedown.prevent="handleMouseDown(i, 1)" @mouseup.prevent="handleMouseUp(i)" class="calendar-atom-time"
            :class="item.class" v-for="(item, i) in rowUnit[1]" :key="i"></li>
          <li style="width: 3%">
            <div class="copyS" @click="clickCopy(1)">
              <img src="/src/assets/images/timeMouse/copy.png" alt="" />
            </div>
          </li>
          </li>
          <li>
            <el-checkbox value="Wednesday" name="type" v-model="isChecked[2]" @change="handleCheckboxChange(2)">
              星期三
            </el-checkbox>
          <li @mousedown.prevent="handleMouseDown(i, 2)" @mouseup.prevent="handleMouseUp(i)" class="calendar-atom-time"
            :class="item.class" v-for="(item, i) in rowUnit[2]" :key="i"></li>
          <li style="width: 3%">
            <div class="copyS" @click="clickCopy(2)">
              <img src="/src/assets/images/timeMouse/copy.png" alt="" />
            </div>
          </li>
          </li>
          <li>
            <el-checkbox value="Thursday" name="type" v-model="isChecked[3]" @change="handleCheckboxChange(3)">
              星期四
            </el-checkbox>
          <li @mousedown.prevent="handleMouseDown(i, 3)" @mouseup.prevent="handleMouseUp(i)" class="calendar-atom-time"
            :class="item.class" v-for="(item, i) in rowUnit[3]" :key="i"></li>
          <li style="width: 3%">
            <div class="copyS" @click="clickCopy(3)">
              <img src="/src/assets/images/timeMouse/copy.png" alt="" />
            </div>
          </li>
          </li>
          <li>
            <el-checkbox value="Friday" name="type" v-model="isChecked[4]" @change="handleCheckboxChange(4)">
              星期五
            </el-checkbox>
          <li @mousedown.prevent="handleMouseDown(i, 4)" @mouseup.prevent="handleMouseUp(i)" class="calendar-atom-time"
            :class="item.class" v-for="(item, i) in rowUnit[4]" :key="i"></li>
          <li style="width: 3%">
            <div class="copyS" @click="clickCopy(4)">
              <img src="/src/assets/images/timeMouse/copy.png" alt="" />
            </div>
          </li>
          </li>
          <li>
            <el-checkbox value="Saturday" name="type" v-model="isChecked[5]" @change="handleCheckboxChange(5)">
              星期六
            </el-checkbox>
          <li @mousedown.prevent="handleMouseDown(i, 5)" @mouseup.prevent="handleMouseUp(i)" class="calendar-atom-time"
            :class="item.class" v-for="(item, i) in rowUnit[5]" :key="i"></li>
          <li style="width: 3%">
            <div class="copyS" @click="clickCopy(5)">
              <img src="/src/assets/images/timeMouse/copy.png" alt="" />
            </div>
          </li>
          </li>
          <li>
            <el-checkbox value="Sunday" name="type" v-model="isChecked[6]" @change="handleCheckboxChange(6)">
              星期日
            </el-checkbox>
          <li @mousedown.prevent="handleMouseDown(i, 6)" @mouseup.prevent="handleMouseUp(i)" class="calendar-atom-time"
            :class="item.class" v-for="(item, i) in rowUnit[6]" :key="i"></li>
          <li style="width: 3%">
            <div class="copyS" @click="clickCopy(6)">
              <img src="/src/assets/images/timeMouse/copy.png" alt="" />
            </div>
          </li>
          </li>
        </ul>
        </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 选择日期 -->
  <div class="demo-range-picker" v-if="pickerVisible">
    <div class="demo-date-picker">
      <div class="block">
        <el-time-picker style="width: 90%" v-model="value1" is-range range-separator="至" @change="handleTimeChange"
          format="HH:mm" />
      </div>
    </div>
    <div class="button_box">
      <!-- <el-button @click="pickerVisible = !pickerVisible">取 消</el-button> -->
      <el-button type="primary" @click="pickerVisible = !pickerVisible" style="margin-right: 15px">
        确 定
      </el-button>
    </div>
  </div>
  <copyPop v-if="copyPopVisible" :isChecked="isCheckedA" :isCheIndex="isCheIndex"
    :selectedDaysData="timeSection[parseInt(isCheIndex)]" @send="(val:any) => (copyPopVisible = val)"
    @updateSelectedDays="handleSelectedDays"></copyPop>
</template>

<script setup lang="ts">
import { onMounted, ref, defineEmits } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import copyPop from './copyPop.vue'
import { ElMessage, ElMessageBox } from 'element-plus';

const emit = defineEmits<{
  (e: 'updateSelectedDays', val: { day: number; data: number[][] }): void
  (
    e: 'updateTemplateData',
    val: { templateData: { week: string; period: string[] }[] },
  ): void
}>()

const copyPopVisible = ref<boolean>(false)
const pickerVisible = ref<boolean>(false)
const value1 = ref<Date[]>([])

onMounted(() => {
  init()
})

const handleTimeChange = (value: [Date, Date]) => {
  if (value && value.length === 2) {
    if (value[1] < value[0]) {
      value[1] = value[0]
    }
    updateCalendarTime(value)
    pickerVisible.value = false

    // 生成 templateData 并发送事件
    const templateData = generateTemplateData()
    emit('updateTemplateData', templateData)
  }
}

const updateCalendarTime = (value: [Date, Date]) => {
  const startTime = value[0].getHours() + value[0].getMinutes() / 60
  const endTime = value[1].getHours() + value[1].getMinutes() / 60
  const currentSegments = timeSection.value[beginDay.value]
  const currentSegmentIndex = currentSegments.findIndex((segment) => {
    return segment[0] <= startTime && segment[1] >= endTime
  })

  if (currentSegmentIndex !== -1) {
    currentSegments[currentSegmentIndex] = [startTime, endTime]
  } else {
    currentSegments.push([startTime, endTime])
  }

  updateTimeDisplay(beginDay.value)
  // emit('updateSelectedDays', {
  //   day: beginDay.value,
  //   data: currentSegments,
  // })

  // 生成 templateData 并发送事件
  const templateData = generateTemplateData()
  emit('updateTemplateData', templateData)
}

const updateTimeDisplay = (day: number) => {
  const segments = timeSection.value[day]
  const timeContentArr = timeContent.value[day].arr

  rowUnit.value[day].forEach((item) => {
    item.class = null
  })

  segments.forEach((segment) => {
    const [start, end] = segment
    for (let i = start * 2; i < end * 2; i++) {
      rowUnit.value[day][i].class = 'ui-selected'
      if (!timeContentArr.includes(i)) {
        timeContentArr.push(i)
      }
    }
  })

  filterTime(day, day)

  // 生成 templateData 并发送事件
  const templateData = generateTemplateData()
  emit('updateTemplateData', templateData)
}

const rowUnit = ref<Array<Array<{ class: string | null; timeData: number }>>>(
  [],
)
const timeContent = ref<Array<{ arr: number[] }>>([])
const timeSection = ref<Array<Array<number[]>>>([])
const timeStr = ref<string[]>([])
let beginDay = ref<number>(0)
let beginTime = ref<number>(0)
let downEvent = ref<boolean>(false)
const isChecked = ref<boolean[]>([
  false,
  false,
  false,
  false,
  false,
  false,
  false,
])
const isCheckedA = ref<boolean>(false)
const isCheIndex = ref<string>('')
const currentState = ref<boolean>(false)
const currentIndex = ref<string>('')

const kuangObj = ref<{
  width: number
  height: number
  top: number
  left: number
  bottom: number
  right: number
  oldLeft: number
  oldTop: number
  flag: boolean
}>({
  width: 0,
  height: 0,
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
  oldLeft: 0,
  oldTop: 0,
  flag: false,
})
let py = ref<string>('')
let px = ref<string>('')
let back = ref<string>('#31676f')
let h = ref<string>('')
let w = ref<string>('')
let top = ref<string>('')
let left = ref<string>('')
let len = ref<number>(0)

const clickCopy = (index: number) => {
  pickerVisible.value = false
  if (timeSection.value[index].length > 0) {
    isCheckedA.value = isChecked.value[index]
    isCheIndex.value = index.toString()
    copyPopVisible.value = !copyPopVisible.value
    const templateData = generateTemplateData()
    emit('updateTemplateData', templateData)
  } else {
         ElMessage({
    message: '不能选择空白时间进行复制',
    type: 'warning',
  })
  }



  // const currentDayData = timeSection.value[index]
  // emit('updateSelectedDays', { day: index, data: currentDayData })

  // 生成 templateData 并发送事件

}

const handleSelectedDays = (
  selectedDaysInfo: { day: string; index: number }[],
) => {
  selectedDaysInfo.forEach((info) => {
    const sourceDay = parseInt(info.day)
    const targetDay = info.index
    clearRowData(targetDay)
    timeSection.value[sourceDay].forEach((segment) => {
      for (let i = segment[0] * 2; i < segment[1] * 2; i++) {
        rowUnit.value[targetDay][i].class = 'ui-selected'
        timeContent.value[targetDay].arr.push(
          rowUnit.value[targetDay][i].timeData,
        )
      }
    })

    filterTime(targetDay, targetDay)
    // emit('updateSelectedDays', {
    //   day: targetDay,
    //   data: timeSection.value[targetDay],
    // })

    // 生成 templateData 并发送事件
    const templateData = generateTemplateData()
    emit('updateTemplateData', templateData)
  })
}

const init = () => {
  for (let i = 0; i < 7; i++) {
    let arr: { class: string | null; timeData: number }[] = []
    for (let j = 0; j < 48; j++) {
      arr.push({ class: null, timeData: j })
    }
    rowUnit.value.push(arr)
    timeContent.value.push({ arr: [] })
    timeSection.value.push([])
    timeStr.value.push('')
  }

  // 生成 templateData 并发送事件
  const templateData = generateTemplateData()
  emit('updateTemplateData', templateData)
}

const handleMouseDown = (i: number, day: number) => {
  downEvent.value = true
  beginDay.value = day
  beginTime.value = i
}

const dian = (event: MouseEvent) => {
  px.value = event.pageX.toString()
  py.value = event.pageY.toString()
}

const yi = (event: MouseEvent) => {
  if (px.value === '' || py.value === '') {
    return
  }
  let px1 = parseInt(px.value)
  let px2 = parseInt(py.value)
  left.value = event.pageX.toString()
  top.value = event.pageY.toString()
  h.value = (parseInt(top.value) - px2).toString()
  w.value = (parseInt(left.value) - px1).toString()
  let hc = -parseInt(h.value)
  let wc = -parseInt(w.value)
  len.value = 1
  back.value = '#31676f'
  if (parseInt(h.value) < 0 && parseInt(w.value) >= 0) {
    h.value = hc.toString()
    left.value = px1.toString()
  } else if (parseInt(h.value) >= 0 && parseInt(w.value) < 0) {
    w.value = wc.toString()
    top.value = px2.toString()
  } else if (parseInt(h.value) < 0 && parseInt(w.value) < 0) {
    h.value = hc.toString()
    w.value = wc.toString()
  } else {
    left.value = px.value
    top.value = py.value
  }
  if (parseInt(w.value) < 0) {
    w.value = (0 - parseInt(w.value)).toString()
  }
  if (parseInt(h.value) < 0) {
    h.value = (0 - parseInt(h.value)).toString()
  }
}
const li = () => {
  px.value = ''
  py.value = ''
  h.value = ''
  w.value = ''
  top.value = ''
  left.value = ''
  len.value = 0
  back.value = ''
}
const handleMouseUp = (i: number) => {
  let begin = beginTime.value
  let start = begin <= i ? begin : i
  let length = Math.abs(begin - i)
  let end = start + length

  const isAdd = (): boolean => {
    for (let y = start; y < end + 1; y++) {
      if (rowUnit.value[beginDay.value][y].class === null) return true
    }
    return false
  }

  if (downEvent.value) {
    if (isAdd()) {
      for (let y = start; y < end + 1; y++) {
        if (rowUnit.value[beginDay.value][y].class === null) {
          rowUnit.value[beginDay.value][y].class = 'ui-selected'
          timeContent.value[beginDay.value].arr.push(
            rowUnit.value[beginDay.value][y].timeData,
          )
        }
      }
    } else {
      for (let y = start; y < end + 1; y++) {
        if (rowUnit.value[beginDay.value][y].class === 'ui-selected') {
          rowUnit.value[beginDay.value][y].class = null
          let c = rowUnit.value[beginDay.value][y].timeData
          let index = timeContent.value[beginDay.value].arr.indexOf(c)
          if (index > -1) {
            timeContent.value[beginDay.value].arr.splice(index, 1)
          }
        }
      }
    }
    filterTime(beginDay.value, beginDay.value)
  }
  downEvent.value = false

  // 记录当前选择的时间段
  const currentSegment = [start / 2, end / 2]
  updateTimePicker(currentSegment)
}

const updateTimePicker = (segment: number[]) => {
  if (segment.length === 2) {
    const startTime = toStr(segment[0])
    const endTime = toStr(segment[1])
    const formattedStartTime = new Date(`1970-01-01T${startTime}`)
    const formattedEndTime = new Date(`1970-01-01T${endTime}`)
    value1.value = [formattedStartTime, formattedEndTime]

    pickerVisible.value = true
  }
}
const updateCheckboxState = (index: number, checked: boolean) => {
  if (index >= 0 && index < isChecked.value.length) {
    isChecked.value[index] = checked

    // 生成 templateData 并发送事件
    const templateData = generateTemplateData()
    emit('updateTemplateData', templateData)
  }
}

const toStr = (num: number): string => {
  if (Number.isInteger(num)) {
    let str = num < 10 ? '0' + num : num.toString()
    return str + ':00'
  } else {
    let str =
      Math.floor(num) < 10 ? '0' + Math.floor(num) : Math.floor(num).toString()
    return str + ':30'
  }
}

const filterTime = (start: number, end: number) => {
  const sortCut = (arr: number[]): number[][] => {
    let result: number[][] = []
    arr.forEach((v, i) => {
      let temp = result[result.length - 1]
      if (!i) {
        result.push([v])
      } else if (v % 1 === 0 && v - temp[temp.length - 1] === 1) {
        temp.push(v)
      } else {
        result.push([v])
      }
    })
    return result
  }

  const timeToStr = (arr: number[][]): string => {
    let str = ''
    arr.forEach((arr, index) => {
      let str1 = ''
      if (index === 0) {
        str1 = toStr(arr[0]) + '~' + toStr(arr[1])
      } else {
        str1 = ' , ' + toStr(arr[0]) + '~' + toStr(arr[1])
      }
      str += str1
    })
    return str
  }

  for (let i = start; i < end + 1; i++) {
    let arr1 = sortCut(timeContent.value[i].arr.sort((a, b) => a - b))
    let arr2: number[][] = []
    arr1.forEach((arr) => {
      let arr3: number[] = []
      arr3.push(arr[0] / 2)
      arr3.push(arr[arr.length - 1] / 2 + 0.5)
      arr2.push(arr3)
    })
    timeStr.value[i] = timeToStr(arr2)
    timeSection.value[i] = arr2

    // 生成 templateData 并发送事件
    const templateData = generateTemplateData()
    emit('updateTemplateData', templateData)
  }
}

const clearRowData = (index: number) => {
  console.log('clearRowData', index);

  rowUnit.value[index].forEach((item) => {
    item.class = null
  })

  timeContent.value[index].arr = []
  timeSection.value[index].length = 0
  timeStr.value[index] = ''
  isChecked.value[index] = false

  // 生成 templateData 并发送事件
  const templateData = generateTemplateData()
  emit('updateTemplateData', templateData)
}

const handleCheckboxChange = (index: number) => {

  currentState.value = isChecked.value[index]
  currentIndex.value = index.toString()
  updateCheckboxState(index, currentState.value)
  // 生成 templateData 并发送事件
  const templateData = generateTemplateData()
  emit('updateTemplateData', templateData)
}

const clear = () => {
  // 获取所有选中的天的索引
  const selectedDays = isChecked.value
    .map((checked, index) => checked ? index : -1)
    .filter(index => index !== -1);

  // 情况1：没有任何选中的天
  if (selectedDays.length === 0) {
    ElMessage({
    message: '请先选择要删除的天数！',
    type: 'warning',
  })
    return;
  }

  // 情况2：选中的天里，至少有一天没有时间段数据
  const hasEmptySelection = selectedDays.some(
    dayIndex => timeStr.value[dayIndex] === ''
  );

  if (hasEmptySelection) {
       ElMessage({
    message: '选中的天数中存在无时间段数据的天，无法删除！',
    type: 'warning',
  })
    return;
  }

  // 情况3：所有选中的天都有时间段数据 → 执行删除
  const fns = () => {
    selectedDays.forEach(dayIndex => {
      clearRowData(dayIndex);
    });
  };

//   syDialogUtil.confirm(`确定要删除 ${selectedDays.length} 天的时段数据吗？`, fns);
      ElMessageBox.confirm(`确定要删除 ${selectedDays.length} 天的时段数据吗？`, '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      showClose: false,
    })
      .then(() => {
        fns()
      })
      .catch(() => {})
};

const allClear = () => {
  const fns = () => {
    // 1. 清空时间段数据
    rowUnit.value.forEach((day) => {
      day.forEach((timeSlot) => {
        timeSlot.class = null;
      });
    });

    timeContent.value.forEach((day) => {
      day.arr = [];
    });

    timeSection.value.forEach((day) => {
      day.length = 0;
    });
    timeStr.value = Array(7).fill('');
    // 2. 重置所有复选框状态
    isChecked.value = Array(7).fill(false);
    // 生成 templateData 并发送事件
    const templateData = generateTemplateData();
    emit('updateTemplateData', templateData);
  };
      ElMessageBox.confirm('确定要全部清空时间段吗？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      showClose: false,
    })
      .then(() => {
        fns()
      })
      .catch(() => {})
};

const generateTemplateData = (): {
  templateData: { week: string; period: string[] }[]
} => {
  const templateData: { week: string; period: string[] }[] = []

  for (let i = 0; i < 7; i++) {
    if (timeSection.value[i].length > 0) {
      const week = (i + 1).toString()
      const periods: string[] = []
      timeSection.value[i].forEach((segment) => {
        const startTime = toStr(segment[0])
        const endTime = toStr(segment[1])
        periods.push(`${startTime}-${endTime}`)
      })

      templateData.push({ week, period: periods })
    }
  }

  return { templateData }
}
</script>

<!-- <style lang="scss" scoped>
.input_btn1 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.demo-range-picker {
  width: 15%;
  position: fixed;
  background: #ffffff;
  box-shadow: 0px 0px 18px 0px rgba(153, 153, 153, 0.6);
  border-radius: 5px;
  height: 135px;
  top: 45%;
  right: 50%;
  transform: translate(45%, -45%);
  z-index: 11;
}

.demo-date-picker {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px;
  box-sizing: border-box;
  margin: 2% auto;

  span {
    width: 30px;
    text-align: center;
    color: #999;
  }
}

.button_box {
  padding-top: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  border-top: 1px solid #eee;
}

.copyS {
  img {
    width: 15px;
    height: 15px;
  }
}

.byted-weektime .calendar {
  width: 100%;
  -webkit-user-select: none;
  position: relative;
  display: inline-block;
  /* width: 500px;
  height: 500px; */
}


#tableBody {
  background-color: #f8f8f8;
  /* position: relative; */
}

.byted-weektime .calendar .calendar-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 4px;
}

.byted-weektime .calendar .calendar-table tr .calendar-atom-time:hover {
  background-color: #459FFF;


}



.byted-weektime .calendar .calendar-table tr .ui-selected {
  background-color: #459FFF;

  // border-right: 1px solid #fff;
}

.byted-weektime .calendar .calendar-table tr .ui-selected:hover {
  background-color: #459FFF;
  /* 背景颜色 */
}

.byted-weektime .calendar .calendar-table tr,
.byted-weektime .calendar .calendar-table th {
  border: 1px solid #fff;
  font-size: 12px;
  text-align: center;
  line-height: 1.8em;
  -webkit-transition: background 200ms ease;
  -moz-transition: background 200ms ease;
  -ms-transition: background 200ms ease;
  transition: background 200ms ease;
}

.byted-weektime .calendar .calendar-table tbody tr {
  height: 30px;
}

.byted-weektime .calendar .calendar-table tbody tr td:first-child {
  background: #f8f8f8;
  border: 1px solid #fff;
}



.byted-weektime .calendar .calendar-table thead th,
.byted-weektime .calendar .calendar-table thead td {
  background-color: #b1caff;
  color: #fff;
  line-height: 2.4em;
}

.byted-weektime .calendar .calendar-table .td-table-tip {
  line-height: 2.4em;
  padding: 0 12px 0 19px;
  background: #fff !important;
}

.byted-weektime .calendar .calendar-table .td-table-tip .clearfix {
  height: 46px;
  line-height: 46px;
}

.byted-weektime .calendar .calendar-table .td-table-tip .pull-left {
  font-size: 14px;
  color: #333333;
}

.byted-weektime .week-td {
  width: 75px;
  padding: 20px 0;
}

.byted-weektime a {
  cursor: pointer;
  color: #2f88ff;
  font-size: 14px;
}

#kuang {
  position: absolute;
  background-color: blue;
  opacity: 0.3;
}

/* 将关闭按钮初始状态设置为隐藏 */
.closestyle {
  position: absolute;
  top: -10px;
  right: -12px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  visibility: hidden;
  /* 初始隐藏 */
}

/* 鼠标悬停在日历上时显示关闭按钮 */
.calendar:hover .closestyle {
  visibility: visible;
  /* 悬停时显示 */
}

.closeicon {
  width: 20px;
  height: 20px;
  color: #fff;
}
</style> -->
<style lang="scss" scoped>
.input_btn1 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.demo-range-picker {
  width: 15%;
  position: fixed;
  background: #ffffff;
  box-shadow: 0px 0px 18px 0px rgba(153, 153, 153, 0.6);
  border-radius: 5px;
  height: 135px;
  top: 45%;
  right: 50%;
  transform: translate(45%, -45%);
  z-index: 11;
}

.demo-date-picker {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px;
  box-sizing: border-box;
  margin: 2% auto;

  span {
    width: 30px;
    text-align: center;
    color: #999;
  }
}

.button_box {
  padding-top: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  border-top: 1px solid #eee;
}

.copyS {
  img {
    width: 15px;
    height: 15px;
  }
}

.byted-weektime .calendar {
  width: 100%;
  -webkit-user-select: none;
  position: relative;
  display: inline-block;
}

#tableBody {
  width: 100%;
  background-color: #f8f8f8;
}

#tableBody ul {
  width: 100%;
}

#tableBody .icon-list li {
  border-bottom: 1px solid #fff;
}

.el-checkbox {
  margin: 0 10px;
}

.byted-weektime .calendar .calendar-list {
  width: 100%;
  border-collapse: collapse;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.byted-weektime .calendar .calendar-list .calendar-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: none;
  color: #999;
  line-height: 36px;
}

.byted-weektime .calendar .calendar-list .calendar-head ul {
  width: 100%;
  display: flex;
}

.byted-weektime .calendar .calendar-list .calendar-head li {
  text-align: center;
  font-size: 12px;
  display: inline-block;
}

.byted-weektime .calendar .calendar-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  text-align: center;
  line-height: 1.8em;
  -webkit-transition: background 200ms ease;
  -moz-transition: background 200ms ease;
  -ms-transition: background 200ms ease;
  transition: background 200ms ease;
}

.byted-weektime .calendar .calendar-list li .calendar-atom-time {
  width: 4.166666666666667%;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: none !important;
}

.byted-weektime .calendar .calendar-list li .calendar-atom-time:hover {
  background-color: #459FFF;
}

.byted-weektime .calendar .calendar-list li .ui-selected {
  background-color: #459FFF;
}

.byted-weektime .calendar .calendar-list li .ui-selected:hover {
  background-color: #459FFF;
}

// .byted-weektime .calendar .calendar-list li:first-child {
//   background: #f8f8f8;
//   border: 1px solid #fff;
// }

#kuang {
  position: absolute;
  background-color: blue;
  opacity: 0.3;
}

/* 将关闭按钮初始状态设置为隐藏 */
.closestyle {
  position: absolute;
  top: -10px;
  right: -12px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  visibility: hidden;
  /* 初始隐藏 */
}

/* 鼠标悬停在日历上时显示关闭按钮 */
.calendar:hover .closestyle {
  visibility: visible;
  /* 悬停时显示 */
}

.closeicon {
  width: 20px;
  height: 20px;
  color: #fff;
}
</style>